<script lang="ts" setup>
interface ThemeData {
  _id: string | number
  imageUrl: string
  classify?: string
  description?: string
}
const props = defineProps<{
  themeData: ThemeData
}>()
</script>

<template>
  <view class="themeList">
    <navigator url="/pages/classify/classify" class="box">
      <image class="pic" :src="props.themeData.imageUrl" mode="scaleToFill" />
      <view class="mark">{{ props.themeData.classify }}</view>
      <!-- <view class="tab">背景</view> -->
    </navigator>
    <!--  <navigator class="box sort">
      <image src="../../../static/logo.png" mode="scaleToFill" />
      <view class="mark">
        <uni-icons type="more-filled" color="#ffa500" size="34" />
        <view class="">分类</view>
      </view>
    </navigator> -->
  </view>
</template>

<style scoped lang="scss">
.themeList {
  .box {
    position: relative;
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .pic {
      width: 100%;
      height: 100%;
    }
    .mark {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70rpx;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(20rpx);
      font-weight: bold;
      font-size: 30rpx;
    }
  }
  .tab {
    position: absolute;
    top: 0;
    left: 0;
    background: orange;
    backdrop-filter: blur(20rpx);
    color: #fff;
    font-size: 22rpx;
    padding: 6rpx 14rpx;
    border-radius: 0 0 20rpx 0;
  }
}
</style>
